<template>
	<view class="loginBg">
		<image mode="widthFix" src="http://s.de123.com/bg.png"></image>
		<view class="topFixed">
			<statusBar></statusBar>
			<view class="ttBarBox">
				<view class="leftBox" @tap="pBack">
					<text class="leftIcon iconfont icon-back"></text>
				</view>
				<view class="rightBox"  @tap="pBack">
					<text class="rightText">立即登录</text>
					<text class="rightIcon iconfont icon-right"></text>
				</view>
			</view>
		</view>
		<view class="loginBox">
			<view class="loginTab">
				<view class="tabBox">
					<text class="tabItem">注册</text>
				</view>
				<view class="contentBox">
					<view class="tabContent">

						<view class="row">
							<text>+86</text>
							<text class="iconfont icon-unfold"></text>
							<input class="talInput" type="number" placeholder="电话号码" v-model="tel" />
							<text :class="['getCode',isSendMsg?'isSend':'']" v-text="sendText" @tap="getMsgCode"></text>
						</view>
						<view class="row">
							<input class="msgCode" type="number" placeholder="请输入验证码" v-model="msgCode" />
						</view>
						<!-- <view class="row">
							<input class="msgCode" type="text"  password="true" placeholder="请输入密码" v-model="pass" />
						</view> -->
						<text class="tishi"></text>
						<button class="loginBtn" @tap="getPass">注册并登录</button>
					</view>
				</view>
			</view>
		</view>
		<view class="otherBox">
			<view class="xieyiBox">
				<text>登录/注册代表您已同意</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.policy">《找培训用户协议》</text>
				<text class="zz" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
			</view>

		</view>
	</view>
</template>

<script>
	import COMM from "@/common/common.js";
	import statusBar from "../../components/statusBar/statusBar.vue";
	import Request from "@/sdk/pocky-request/index.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			statusBar
		},
		computed: {
			...mapState({
				initInfo: state => state.sys.initInfo,
				locationCity: state => state.map.locationCity,
			})
		
		},
		data() {
			return {
				tel: '',
				msgCode: '',
				isGetMsg: false,
				sendText: '获取验证码',
				isSendMsg: false,
			};
		},
		methods: {
			// 手机号+验证码登录
			loginByTel() {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.isGetMsg) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else{
					// 验证登录流程
					this.$store.dispatch("apiUserRegister",{
						"username":this.tel,
						"code":this.msgCode
					}).then(res=>{
						setTimeout(()=>{
							this.$store.dispatch("timLogin",res.data.data.imid).then(timRes => {
								setTimeout(()=>{
									this.$store.dispatch("timEditInfo",{
										nick:res.data.data.nickname,
										role:1
										// profileCustomField:[{
										// 	key:'Tag_Profile_Custom_uid',
										// 	value:res.data.data.userId.toString()
										// }]
									})
								},1000)
							})
							this.$store.dispatch("eidtUserInfo",{
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							})
						},500)
						this.toPage("index")
					})
				}
			},
			
			getPass() {
				this.loginByTel()
			},
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						
						this.$store.dispatch("apiSendMsgCode",{
							phone:this.tel,
							type:'1'
						}).then(res=>{
							this.isGetMsg = true; //修改状态
							let t = 60;
							this.sendText = t + "秒"
							this.isSendMsg = true;
							const itval = setInterval(() => {
								t--;
								if (t < 1) {
									t = 60;
									this.sendText = "获取验证码"
									this.isSendMsg = false;
									clearInterval(itval);
								} else {
									this.isSendMsg = true;
									this.sendText = t + "秒"
								}
							}, 1000)
						})
					}
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}
			},
			
		},
		onLoad() {
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	page {
		height: 100%;
	}

	.loginBg {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
		}

		.overMask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
		}
	}

	.topFixed {
		position: fixed;
		width: 100%;
		z-index: 999;
		height: 90upx;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0);
	}

	.ttBarBox {
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		color: #FFFFFF;
		left: 0;
		position: relative;
		padding: 0 34upx;
		background-color: rgba(0,0,0,0);
		.leftBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			left: 0;
			line-height: 90upx;

			.leftIcon {
				font-size: 40upx;
				margin-right: 10upx;

			}
		}

		.rightBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			right: 0;
			/* #ifdef MP */
			right: 27%;
			/* #endif */

			line-height: 70upx;

			.rightIcon {
				font-size: 24upx;
				/* #ifdef APP-PLUS */
				margin-top: 4upx;
				/* #endif */

			}

			.rightText {
				font-size: 24upx;
				color: #ffffff;
			}
		}


	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.loginBox {
		top: 22%;
		width: 100%;
		position: absolute;
		display: flex;
		justify-content: center;

		.loginTab {
			width: 80%;
			background-color: #ffffff;
			box-shadow: 0upx 4upx 42upx 0upx rgba(242, 192, 105, 0.5);
			border-radius: 21upx;
			padding: 54upx 36upx 80upx 36upx;
			display: flex;
			flex-direction: column;

			.tabBox {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.tabItem {
					flex-grow: 0;
					flex-shrink: 0;
					text-align: center;
					display: inline-block;
					padding-bottom: 18upx;
					font-size: 30upx;
					font-weight: bold;
					color: #3b434d;
					border-bottom: 2px solid #FFFFFF;
				}

				.active {
					color: #ff9c27;
					border-bottom: 2px solid #ff9c27;
				}
			}

			.contentBox {
				padding-top: 38upx;

				.tabContent {
					display: flex;
					flex-direction: column;
					align-items: stretch;

					.row {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 98upx;
						border-radius: 10upx;
						border: solid 1upx #dedede;
						padding: 0 16upx;
						margin-top: 28upx;

						text {
							font-size: 26upx;
							color: #9c9c9c;
						}

						.iconfont {
							font-size: 28upx;
							line-height: 24upx;
							margin-left: 6upx;
						}

						.getCode {
							font-size: 26upx;
							color: #ed5614;
							text-align: right;
							flex-grow: 1;
						}

						.isSend {
							color: #9c9c9c;

						}

						.talInput {
							font-size: 26upx;
							color: #9c9c9c;
							width: 50%;
							margin-left: 10upx;
						}

						.msgCode {
							font-size: 26upx;
							color: #9c9c9c;
							padding-left: 10upx;
							width: 100%;
						}
					}

					.tishi {
						margin-top: 12upx;
						font-size: 22upx;
						color: #959595;
					}

					.forgetPass {
						color: @color-m;
					}

					.loginBtn {
						width: 100%;
						height: 88upx;
						color: #FFFFFF;
						line-height: 88upx;
						background-image: linear-gradient(0deg,
							#f6b423 0%,
							#fbdc2e 100%),
							linear-gradient(#f7bd26,
							#f7bd26);
						background-blend-mode: normal,
							normal;
						box-shadow: 0rpx 4upx 13upx 1upx rgba(255, 181, 51, 0.5);
						border-radius: 44upx;
						border: none;
						margin-top: 100upx;
					}

					.loginBtn:after {
						border: none;
					}
				}
			}
		}
	}

	.otherBox {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;

		.xieyiBox {
			margin-bottom: 52upx;
			text-align: center;

			text {
				font-size: 22upx;
				color: #777777;
			}

			.zz {
				color: @color-m;
			}
		}

		.otherLogin {
			display: flex;
			justify-content: center;
			margin-bottom: 8.7%;

			image {
				margin: 0 37upx;
				width: 84upx;
				height: 84upx;
			}
		}
	}
</style>
